<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM01</title>
</head>
<body>
    <div id="desc">通过对象来描述界面</div>
    <button id="btn">让描述变色</button>
    <script>
        // 可以去获取到这个dom
        // js提供了document可以用来获取dom
        var descDom = document.getElementById("desc");
        // 样式的设置
        descDom.style.backgroundColor = "hotpink";
        console.log(descDom)
        // 1. dom是什么
        // 2. dom能做什么
        // 3. dom怎么用

        // 通过dom添加一些事件
        var btnDom = document.getElementById("btn");
        // onclick 代表我们给它增加了一个点击事件
        btnDom.onclick = function() {
            if (descDom.style.backgroundColor == 'hotpink') {
                descDom.style.backgroundColor = 'lightblue';
            }else {
                descDom.style.backgroundColor = 'hotpink'
            }
        }
    </script>
</body>
</html>